<template>
  <div>
    <el-card shadow="hover">
      <el-form :inline="true">
        <v-search
          :search="form"
          :formParam="formParam"
          @query="tableRef.query()"
          @reset="tableRef.reset()"
        >
          <template #customize="{ label, key }">
            <el-input
              v-model="formParam[key]"
              :placeholder="`请输入${label}`"
              clearable
            />
          </template>
        </v-search>
      </el-form>
    </el-card>

    <el-card shadow="hover" style="margin-top: 10px">
      <v-table
        ref="tableRef"
        :table="table"
        :setFn="getPage"
        :apiParam="{ current: 1, size: 10, daterange: undefined }"
        :formParam="formParam"
      >
        <!-- from -->
        <template #customize="{ label, key }">
          <el-input
            v-model="formParam[key]"
            :placeholder="`请输入${label}`"
            clearable
          />
        </template>
        <!-- 中间层：信息/按钮等 -->
        <!-- <template #info></template> -->
        <!-- table -->
        <template #image="{ row }">
          <el-image
            style="width: 50px; height: 50px"
            :src="row.image"
            :preview-src-list="[row.image]"
            preview-teleported
          />
        </template>
        <template #operate="{ row }">
          <el-popconfirm title="确认删除此项吗？" @confirm="onDelete(row.id)">
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </v-table>
    </el-card>
  </div>
</template>

<script  setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { form, table } from "./config/page";
import { tablePage, tableDelete } from "@/api";

// ref
const tableRef = ref(null);
const formParam = ref({});

const getPage = () => {
  tableRef.value.setFn(tablePage, {});
};

// delete
const onDelete = async (id) => {
  await tableDelete({ id });
  ElMessage.success("删除成功");
  onRefresh();
};

const onRefresh = () => {
  tableRef.value.refresh();
};

onMounted(() => {
  getPage();
});
</script>

<style scoped lang="scss"></style>
